<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>慕家居</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 页首 -->
    <header>
        <!-- 服务 -->
        <div class="header-service">
            <div class="center-wrap">
                <p>服务热线：400-8888-888</p> 
            </div>
        </div>
        <!-- 主要内容nav和logo -->
        <div class="header-content">
            <div class="center-wrap">
                <h1>慕家居</h1>
                <nav>
                    <ul class="clearfix">
                        <li class="home">
                            <a href="">
                                <div class="pic-box">
                                    <div class="bg"></div>
                                    <img src="./images/home-gry.png" alt="">
                                </div>
                                <div class="word-box">
                                    网站首页
                                </div>
                            </a>
                        </li>
                        <li class="abouts">
                            <a href="">
                                <div class="pic-box">
                                    <div class="bg"></div>
                                    <img src="./images/abouts-gry.png" alt="">
                                </div>
                                <div class="word-box">
                                    关于我们
                                </div>
                            </a>
                        </li>
                        <li class="kefu">
                            <a href="">
                                <div class="pic-box">
                                    <div class="bg"></div>
                                    <img src="./images/kefu-gry.png" alt="">
                                </div>
                                <div class="word-box">
                                    客服中心
                                </div>
                            </a>
                        </li>
                        <li class="chanpin">
                            <a href="">
                                <div class="pic-box">
                                    <div class="bg"></div>
                                    <img src="./images/chanpin-gry.png" alt="">
                                </div>
                                <div class="word-box">
                                    产品建设
                                </div>
                            </a>
                        </li>
                        <li class="fuwu">
                            <a href="">
                                <div class="pic-box">
                                    <div class="bg"></div>
                                    <img src="./images/fuwu-gry.png" alt="">
                                </div>
                                <div class="word-box">
                                    服务大厅
                                </div>
                            </a>
                        </li>
                    </ul>
                </nav>
                <div class="search">
                    <input type="text" placeholder="请输入搜索内容……">
                    <a href="" class="iconfont">&#xe60b;</a>
                </div>
            </div>
        </div>
    </header>

    <!-- banner -->
    <section class="banner" id="banner">
        <ul id="banner-ul" class="banner-ul">
            <li><img src="./images/banner01.png" alt=""></li>
            <li><img src="./images/banner02.png" alt=""></li>
            <li><img src="./images/banner03.png" alt=""></li>
        </ul>
        <!-- 小圆点 -->
        <ol id="banner-ol">
            <li class="current" data-n="0"></li>
            <li data-n="1"></li>
            <li data-n="2"></li>
        </ol>
    </section>
    <script src="./js/carousel.js"></script>

    <!-- 展示台 -->
    <section class="show-stand">
        <div class="center-wrap">
            <div class="content">
                <nav class="show">
                    <ul id="show-ul">
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product01.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product02.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product03.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product04.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product05.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product06.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product07.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product08.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product09.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <div class="pic-box">
                                    <img src="./images/product10.png" alt="">
                                </div>
                                <div class="word-box">
                                    时尚卫生间墙面颜色2029装饰设计
                                </div>
                            </a>
                        </li>
                    </ul>
                </nav>
                <a href="javascript:;" class="left-btn" id="show-left-btn"></a>
                <a href="javascript:;" class="right-btn" id="show-right-btn"></a>
            </div>
        </div>
    </section>
    <script src="./js/show.js"></script>

    <!-- 了解我们 -->
    <section class="about-us">
        <div class="center-wrap">
            <div class="about-content">
                <p class="one">了解我们</p>
                <p class="two">about us</p>
            </div>
            <div class="main-content clearfix">
                <div class="part1">
                    <p class="guanyu">关于我们</p>
                    <p class="name">慕家居装饰材料有限公司</p>
                    <p class="line"></p>
                    <p class="pro">慕家居家居装修网北欧风格家具图片专区,是国内海量全面的高质量北欧风格家具图片库…</p>
                    <p class="liaojie">了解更多</p>
                </div>
                <div class="part2">
                    <img src="./images/aboutus.png" alt="">
                </div>
                <div class="part3">
                    <div class="liuyan grid">
                        <p>在线留言</p>
                        <p class="p1">on-line message</p>
                    </div>
                    <div class="guanggao grid">
                        <p>广告经营</p>
                        <p class="p2">Advertising management</p>
                    </div>
                    <div class="wangluo grid">
                        <p>网络咨询</p>
                        <p class="p3">Network consultation</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 精品推荐 -->
    <section class="goods">
        <div class="center-wrap">
            <div class="title">
                <p class="jinpin">精品推荐</p>
                <p class="en">Boutique recommendation</p>
                <p class="line"></p>
            </div>
            <div class="content">
                <div class="content-pic">
                    <ul id="goods-ul">
                        <li class="pic1">
                            <a href="">
                                <img src="./images/recommend1.png" alt="">
                                <div class="mask">轻奢风格样板房客厅色彩搭配装修设计</div>
                            </a>
                        </li>
                        <li class="pic2">
                            <a href="">
                                <img src="./images/recommend2.png" alt="">
                                <div class="mask">简约美式风格卧室衣柜设计</div>
                            </a>
                        </li>
                        <li class="pic3">
                            <a href="">
                                <img src="./images/recommend3.png" alt="">
                                <div class="mask">轻奢风格L型厨房装修设计</div>
                            </a>
                        </li>
                        <li class="pic1">
                            <a href="">
                                <img src="./images/recommend4.png" alt="">
                                <div class="mask">轻奢风格样板房客厅色彩搭配装修设计</div>
                            </a>
                        </li>
                        <li class="pic2">
                            <a href="">
                                <img src="./images/recommend5.png" alt="">
                                <div class="mask">简约美式风格卧室衣柜设计</div>
                            </a>
                        </li>
                        <li class="pic3">
                            <a href="">
                                <img src="./images/recommend6.png" alt="">
                                <div class="mask">轻奢风格L型厨房装修设计</div>
                            </a>
                        </li>
                        <li class="pic1">
                            <a href="">
                                <img src="./images/recommend7.png" alt="">
                                <div class="mask">轻奢风格样板房客厅色彩搭配装修设计</div>
                            </a>
                        </li>
                        <li class="pic2">
                            <a href="">
                                <img src="./images/recommend8.png" alt="">
                                <div class="mask">简约美式风格卧室衣柜设计</div>
                            </a>
                        </li>
                        <li class="pic3">
                            <a href="">
                                <img src="./images/recommend9.png" alt="">
                                <div class="mask">轻奢风格L型厨房装修设计</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <a href="javascript:;" class="left-btn" id="goods-left-btn"></a>
                <a href="javascript:;" class="right-btn" id="goods-right-btn"></a>
            </div>
        </div>
    </section>
    <script src="./js/goods.js"></script>

    <!-- 新闻中心 -->
    <section class="news">
      <div class="center-wrap">
          <div class="title">
              <p class="name">新闻中心</p>
              <p class="en">press center</p>
          </div>
          <div class="content">
              <ul>
                  <li>
                      <div class="pic-box">01</div>
                      <div class="word-box">
                          <p class="one">最新招标</p>
                          <p class="two">重庆业主要求：一居室的户型，想把阳台利用起来，改成一室一厅的户型，业主表示已经请朋友把以前的装修敲了，现在基本是毛坯的状态……</p>
                      </div>
                  </li>
                  <li>
                      <div class="pic-box">02</div>
                      <div class="word-box">
                          <p>装修日记</p>
                          <p>终于在北京四环里贷款买了套两居室二手房，还是很欣喜的，为了装好它，我可真是费了心了，毕竟是自己以后的小家，所以我真是没少操心……</p>
                      </div>
                  </li>
                  <li>
                      <div class="pic-box">03</div>
                      <div class="word-box">
                          <p>装修百科</p>
                          <p>买房之后，无论是毛坯房还是留下二手房，很多业主都会选择进行装修。装修可以为你带来一个你喜欢的房屋，同时满足你需要的生活方式……</p>
                      </div>
                  </li>
                  <li>
                      <div class="pic-box">04</div>
                      <div class="word-box">
                          <p>热门搜索</p>
                          <p>选择防盗门最重要的就是工艺质量：应特别注意检查有无焊接缺陷，诸如开焊、未焊、漏焊等现象。看门扇与门框的配合是否密实，间隙是否均匀……</p>
                      </div>
                  </li>
              </ul>
          </div>
      </div>  
    </section>

    <!-- 页尾 -->
    <footer>
        <!-- 第一部分 -->
        <div class="part1">
            <div class="center-wrap">
                <h2>慕家居</h2>
                <ul>
                    <li>咨询电话：010-88888888</li>
                    <li>公司网址：www.imooc.com</li>
                    <li>邮箱：KEFU@IMOOC.com</li>
                </ul>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="part2">Copyright &copy; 2020 imooc.com All Rights Reserved | 京ICP备 </div>
    </footer>
</body>
</html>